<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  img {
    display: block;
    width: 100vw;
    height: 100vh;

  }
</style>

<body>
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0"
    alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://tse4-mm.cn.bing.net/th/id/OIP-C.2rQ25qnSMQHXGcHz3Rp2pAHaEo?rs=1&pid=ImgDetMain" alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://tse1-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?rs=1&pid=ImgDetMain" alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://ts1.cn.mm.bing.net/th/id/R-C.b38e08506d2fcec2d3bb6f39862fb355?rik=6DvebjPCe7jmzg&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2020-06%2f07%2f20%2f202006072025119471-4612360.jpg&ehk=pjQQbEmnViTEY5rtZfO7L8S1HGU9HgvF49BQKr635Z4%3d&risl=&pid=ImgRaw&r=0"
    alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://ts1.cn.mm.bing.net/th/id/R-C.f308e7a1a85798e15682fdc7008791d9?rik=%2fZdVRXMlEY7r%2bQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190403%2f15%2f1554276324-GnUecRKmZT.jpg&ehk=lDzb%2fKCLTqe63Wh1S2NcBBZWsskk47PX0DeJu49zENM%3d&risl=&pid=ImgRaw&r=0"
    alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://ts1.cn.mm.bing.net/th/id/R-C.6b9074faed6dae2a0457e690c2aa3a03?rik=6V%2fv2rXhPCf7Pg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20115%2f534%2fw1280h854%2f20190221%2f9461-htknpmf9890147.jpg&ehk=RyGDdQrMiIWbz7Uxa%2fLSPOz2iXvM8JpbkBIZgttQkWc%3d&risl=&pid=ImgRaw&r=0"
    alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJlbKx2OIVcANAAkMLy31hFgAALHywPR2wsACQxH295.jpg"
    alt="">
  <img
    src="https://ts1.cn.mm.bing.net/th/id/R-C.f121fe0b20c6ffbf53745def7ab528c9?rik=nyqzl880pE3JFQ&riu=http%3a%2f%2fimg3.iqilu.com%2fdata%2fattachment%2fforum%2f201304%2f15%2f143857mp5iszupmaqm5y10.jpg&ehk=fq3iPDWc%2byKcAJwjSLzPXglHH0JxH9WfsRj5Y0ee9nI%3d&risl=&pid=ImgRaw&r=0"
    data-src="https://ts1.cn.mm.bing.net/th/id/R-C.74a2e692759c6f97b934f901ab7e9388?rik=vvlFMu14GL551Q&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50034%2f3302.jpg_wh860.jpg&ehk=5Pb8Ubf3Ix%2ftJqP2%2fggUBdy%2fqXYxgxQscV5uDK9rwXw%3d&risl=&pid=ImgRaw&r=0"
    alt="">
</body>
<script>
  let observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        let img = entry.target;
        console.log(img);
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, {
    root: null,
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.5
  });

  const imgs = document.querySelectorAll('img');


  imgs.forEach(img => observer.observe(img))
</script>

</html>